<template>
	<view class="page">
		<view class="head">
			<view class="flex marginBottom-20 items-center">
				<image :src="topsmall_image" mode="" class="head_img"></image>
				<view class="head_title">
					{{title}}
				</view>
			</view>
			<view class="head_cont">
				<span v-html="title1"></span>
			</view>
			<view class="head_cont">
				<span v-html="title2"></span>
			</view>
			<view class="head_cont">
				<span v-html="title3"></span>
			</view>
		</view>
		<view class="lists">
			<view class="list flex items-center" v-for="(i,v) in list" :key="v"
				:class="i.learn_status==0?'hover_list':''" @click="toPage(i,v)">
				<image :src="i.zhuang_image" mode="" class="l_img" :class="i.learn_status==0?'bgColor':''"></image>
				<view class="">
					<view class="l_title">
						{{i.page_name}}
					</view>
					<view class="flex" style="padding: 12rpx 0 30rpx 0;" v-if="i.learn_status!=0">
						<view class="l_num">
							总数:{{i.total_count||0}}
						</view>
						<view class="l_num flex items-center marginLeft-40">
							已记住:
							<view class="l_numColor">
								{{i.rem_count||0}}
							</view>
						</view>
					</view>
					<view class="l_pro" v-if="i.learn_status!=0">
						进楼次数：{{i.pageentr_num||0}}
					</view>
				</view>
				<image :src="i.learn_image" mode="" class="l_posImg"></image>
				<image :src="i.lock_image" mode="" class="absolute list_bg" v-if="i.learn_status==0"></image>
			</view>
			<!-- <view class="list hover_list flex">
				<image src="../../static/logo.png" mode="" class="l_img"></image>
				<view class="">
					<view class="l_title">
						第001幢
					</view>
				</view>
				<view class="absolute list_bg">
					<image src="../../static/image/no_data.png" mode="" class="suo_img"></image>
					<view class="suo_title">
						等待你来解锁哦~
					</view>
				</view>
			</view> -->
		</view>
		<view class="jieshao">
			有家记忆法
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		inject,
		onMounted,
		reactive
	} from 'vue';
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';
	const region_num = ref('')
	const reciteWordsIndexApi = inject('reciteWordsIndex')
	const topsmall_image = ref('')
	const list = ref([])
	const title = ref('')
	const title1 = ref('')
	const title2 = ref('')
	const title3 = ref('')
	onLoad((op) => {
		region_num.value = op.region_num
		// reciteWordsIndexApi({
		// 	region_num: region_num.value
		// }).then(res => {
		// 	console.log(res, 115)
		// 	topsmall_image.value = res.topsmall_image
		// 	title.value = res.title
		// 	title1.value = res.title1
		// 	title2.value = res.title2
		// 	title3.value = res.title3
		// 	list.value = res.list
		// })
	})
	onShow(() => {
		reciteWordsIndexApi({
			region_num: region_num.value
		}).then(res => {
			console.log(res, 115)
			topsmall_image.value = res.topsmall_image
			title.value = res.title
			title1.value = res.title1
			title2.value = res.title2
			title3.value = res.title3
			list.value = res.list
		})
	})
	const addregionlogApi = inject('addregionlog')
	const toPage = (t, i) => {
		if (t.learn_status != 0) {
			addregionlogApi({
				total_page: t.page,

			}).then(res => {
				console.log(res, 115)
				uni.navigateTo({
					url: '/pages/index/memoryMethod2?page=' + t.page + '&pageentr_num=' + t
						.pageentr_num +'&region_num='+region_num.value
				})
			})

		}

	}
</script>

<style scoped lang="scss">
	.head {
		padding: 40rpx 32rpx;
		width: 100%;
		height: 346rpx;
		background: url('http://bbsf.oss-cn-shanghai.aliyuncs.com/english/jiword/indexzbg.png') no-repeat;
		background-size: 100% 100%;
		.head_img {
			width: 40rpx;
			height: 40rpx;
			margin-right: 20rpx;
		}

		.head_title {
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 40rpx;
			color: #fff;
		}

		.head_cont {
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 28rpx;
			color: #23663B;
			line-height: 39rpx;
		}
	}

	.lists {
		padding-top: 40rpx;
		.list {
			padding: 16rpx 0;
			width: 686rpx;
			height: 180rpx;
			// background: #FFFFFF;
			box-shadow: 0rpx 8rpx 30rpx 0rpx rgba(0, 0, 0, 0.05);
			border-radius: 30rpx 30rpx 30rpx 30rpx;
			margin: 0 auto 16rpx;
			position: relative;

			.l_img {
				width: 180rpx;
				height: 180rpx;
				margin: 0 24rpx 0 16rpx;
				border-radius: 16rpx;
				display: block;
			}

			.l_title {
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 30rpx;
				color: #333333;
			}

			.l_num {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #333333;
			}

			.l_numColor {
				color: #51D580;
			}

			.l_pro {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #999999;
				line-height: 28rpx;
			}

			.l_posImg {
				width: 126rpx;
				height: 58rpx;
				position: absolute;
				top: 0;
				right: 0;
			}

			.bgColor {
				background: rgba(0, 0, 0, 0.3);
				background-color: #F5F5F5;
			}
		}

		.hover_list {
			// background: rgba(0, 0, 0, 0.3);

			.list_bg {
				position: absolute;
				width: 100%;
				height: 100%;

				.suo_img {
					width: 60rpx;
					height: 60rpx;
					display: block;
					margin: 44rpx auto 26rpx;
				}

				.suo_title {
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					font-size: 28rpx;
					color: #FFFFFF;
					text-align: center;
				}
			}
		}
	}

	.jieshao {
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #999999;
		text-align: center;
		margin-top: 40rpx;
	}
</style>